<style>
    #tail-log {
        font-size: 12px;
        height: 100%;
        width: 100%;
        overflow: auto;
        background: #f5f5f5;
    }

    #tail-log > pre {
        font-size: 12px;
        display: block;
        line-height: 1.428571429;
        color: #333;
        word-break: break-all;
        word-wrap: break-word;
        border: none;
        background-color: #f5f5f5;
        padding: 0;
    }
</style>
<div class="panel-header panel-header-noborder">
    <div class="panel-title">
        <div class="breadcrumbs">
            <ol class="breadcrumb">
                <li><a href="javascript:;"><i class="fa fa-home"></i> 首页</a></li>
                <li><a href="javascript:;">日志管理</a></li>
                <li><a href="javascript:;">实时日志</a></li>
            </ol>
        </div>
    </div>
    <div class="panel-tool"></div>
</div>
<div id="tail-log" CONTENTEDITABLE="true"></div>


<script>
    if (!wsConn) {
        openWs()
    }
    var timeIntervaler = null
    wsConn.onclose = function (evt) {
        $("#tail-log").append("<pre>远程已关闭</pre>")
        timeIntervaler = setInterval(function () {
            openWs()
        }, 10000)
    };
    wsConn.onmessage = function (evt) {
        $("#tail-log").append("<pre>" + evt.data + "</pre>")
        console.log(evt.data)
        try {
            document.getElementById("tail-log").scrollTop = document.getElementById("tail-log").scrollHeight;
        } catch (e) {
        }
    };

    function openWs() {
        wsConn = new WebSocket("ws://" + document.location.host + "/b/system/ws-connection");
        if (wsConn) {
            clearInterval(timeIntervaler)
        } else {
            $("#tail-log").append("<pre>连接失败, 稍后重试</pre>")
        }

    }
</script>
